<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 考试座位管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f0f4f8;
        }
        .users-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .users-header {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
            padding-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table-responsive {
            margin-bottom: 20px;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .badge-role {
            font-size: 0.85em;
            padding: 5px 8px;
        }
        .badge-status {
            font-size: 0.85em;
            padding: 5px 8px;
        }
        .alert {
            margin-bottom: 20px;
        }
        .action-buttons .btn {
            margin-right: 5px;
        }
        .search-box {
            max-width: 300px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">考试座位管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">座位编排</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/exam">考试信息</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link active" href="/admin/users">用户管理</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link" href="/admin/settings">系统设置</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> <span sec:authentication="name">用户名</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/users/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="/users/change-password"><i class="bi bi-key"></i> 修改密码</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/auth/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="users-container">
        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> <span th:text="${success}">操作成功</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i> <span th:text="${error}">操作失败</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- 用户管理标题和搜索框 -->
        <div class="users-header">
            <div>
                <h2><i class="bi bi-people-fill me-2"></i>用户管理</h2>
                <p class="text-muted">管理系统用户账号和权限</p>
            </div>
            <div class="search-box">
                <form action="/admin/users" method="get" class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="搜索用户名或邮箱" name="search" th:value="${search}">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </form>
            </div>
        </div>

        <!-- 用户列表 -->
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>最后登录</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.id}">1</td>
                        <td th:text="${user.username}">admin</td>
                        <td th:text="${user.fullName}">管理员</td>
                        <td th:text="${user.email}">admin@example.com</td>
                        <td>
                            <span th:if="${user.role == 'ADMIN'}" class="badge bg-danger badge-role">管理员</span>
                            <span th:if="${user.role == 'USER'}" class="badge bg-primary badge-role">普通用户</span>
                        </td>
                        <td>
                            <span th:if="${user.active}" class="badge bg-success badge-status">已启用</span>
                            <span th:unless="${user.active}" class="badge bg-secondary badge-status">已禁用</span>
                        </td>
                        <td th:text="${#dates.format(user.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                        <td th:text="${user.lastLogin != null ? #dates.format(user.lastLogin, 'yyyy-MM-dd HH:mm') : '从未登录'}">2023-01-01 12:00</td>
                        <td class="action-buttons">
                            <!-- 查看详情按钮 -->
                            <a th:href="@{/admin/users/{id}(id=${user.id})}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i>
                            </a>
                            
                            <!-- 更改角色按钮 -->
                            <div class="btn-group" th:unless="${#authentication.name == user.username}">
                                <button type="button" class="btn btn-sm btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bi bi-person-badge"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <form th:action="@{/admin/users/{userId}/role(userId=${user.id})}" method="post">
                                            <input type="hidden" name="role" value="ADMIN">
                                            <button type="submit" class="dropdown-item" th:disabled="${user.role == 'ADMIN'}">设为管理员</button>
                                        </form>
                                    </li>
                                    <li>
                                        <form th:action="@{/admin/users/{userId}/role(userId=${user.id})}" method="post">
                                            <input type="hidden" name="role" value="USER">
                                            <button type="submit" class="dropdown-item" th:disabled="${user.role == 'USER'}">设为普通用户</button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                            
                            <!-- 启用/禁用按钮 -->
                            <form th:action="@{/admin/users/{userId}/toggle-status(userId=${user.id})}" method="post" class="d-inline" th:unless="${#authentication.name == user.username}">
                                <button type="submit" class="btn btn-sm" th:classappend="${user.active ? 'btn-outline-secondary' : 'btn-outline-success'}">
                                    <i class="bi" th:classappend="${user.active ? 'bi-toggle-off' : 'bi-toggle-on'}"></i>
                                </button>
                            </form>
                            
                            <!-- 删除按钮 -->
                            <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" th:data-bs-target="'#deleteModal' + ${user.id}" th:unless="${#authentication.name == user.username}">
                                <i class="bi bi-trash"></i>
                            </button>
                            
                            <!-- 删除确认模态框 -->
                            <div class="modal fade" th:id="'deleteModal' + ${user.id}" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            确定要删除用户 <strong th:text="${user.username}">username</strong> 吗？此操作不可撤销。
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            <form th:action="@{/admin/users/{id}/delete(id=${user.id})}" method="post">
                                                <button type="submit" class="btn btn-danger">确认删除</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr th:if="${#lists.isEmpty(users)}">
                        <td colspan="9" class="text-center py-4">没有找到用户记录</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <nav th:if="${totalPages > 1}" aria-label="用户列表分页">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${currentPage == 0 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/admin/users(page=0, search=${search})}">首页</a>
                </li>
                <li class="page-item" th:classappend="${currentPage == 0 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/admin/users(page=${currentPage - 1}, search=${search})}">&laquo;</a>
                </li>
                <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" th:classappend="${currentPage == i ? 'active' : ''}">
                    <a class="page-link" th:href="@{/admin/users(page=${i}, search=${search})}" th:text="${i + 1}">1</a>
                </li>
                <li class="page-item" th:classappend="${currentPage == totalPages - 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/admin/users(page=${currentPage + 1}, search=${search})}">&raquo;</a>
                </li>
                <li class="page-item" th:classappend="${currentPage == totalPages - 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/admin/users(page=${totalPages - 1}, search=${search})}">末页</a>
                </li>
            </ul>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>